<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">消息通知</block>
		</cu-custom>
		<view class="xitong">
			<view class="nzxx">
				<view class="red">
					<view class="dalou iconfont icon-xuexiao1"></view>
					<view class="numBox" v-if="system_list.count>0">{{system_list.count}}</view>
				</view>
				<view class="zitikuai" @click="skip_notice(2)">
					<view class="xtxx">企业合作申请<view class="jtian">{{timeToStr(system_list.add_time,'yyyy/MM/dd hh:mm')}}</view></view>
					<view class="shizhuan">{{system_list.content}}</view>
				</view>
			</view>
			
			<view class="nzxx" style="border-bottom: none;" @click="skip_notice(10)">
				<view class="green">
					<view class="maozi iconfont icon-xiaoxi"></view>
					<view class="numBox" v-if="cop_list.count > 0">{{cop_list.count}}</view>
				</view>
				<view class="zitikuai">
					<view class="xtxx">系统通知<view class="jtian">{{timeToStr(cop_list.add_time,'yyyy/MM/dd hh:mm')}}</view></view>
					<view class="shizhuan">{{cop_list.content}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		timeToStr
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				count:'',
				system_list:[],
				cop_list:[],
				timeToStr:timeToStr
			}
		},
		onLoad() {
			appLogin((user_info) => {
				console.log(user_info)
				this.getmessage()
				this.notice_count()
			})
			
		},
		methods: {
			getmessage(){
				httpGet({
					url:'/api/school/notice_list',
					data:{
						type:''	
					}
				}).then((res) => {
					console.log(res)
				})
			},
			skip_notice(type){
				uni.navigateTo({
					url:'system_ntification?type='+type,
				})
				console.log(type)
			},
			onWsMessage(data){
				if(data.action == 'new_notice'){
					// 获取当前消息数
					this.notice_count();
				}
			},
			notice_count(){
				httpGet({
					url:'/api/school/notice_count',
				}).then((res) => {
					console.log(res)
					// 企业合作
					this.system_list = res.result['2']
					// 学校合作
					this.cop_list = res.result['10']
					console.log(this.system_list)
					
				})
			}
		}
	}
</script>

<style>
	.top{
		background-color: rgb(59,115,246);
		text-align: center;
		height: 152rpx;
		line-height: 200rpx;
		color: rgb(255,255,255);
		font-size: 40rpx;
	}
	.xitong{
		background-color: rgb(255,255,255);
		margin-top: 35rpx;
	}
	.nzxx{
		display: flex;
		padding-top: 42rpx ;
		padding-left: 52rpx; 
		padding-bottom: 36rpx;
		border-bottom: solid 1rpx rgb(238,238,238);
	}
	.red{
		border-radius: 19rpx;
		background-color: rgb(252,83,102); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
		position: relative;
	}
	.dalou{
		color: rgb(255,255,255);
		font-size: 86rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: center;
	}
	.zitikuai{
		margin-top: 7rpx;
		margin-left: 34rpx;
	}
	.xtxx{
		color: rgb(19,19,19);
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
	}
	.jtian{
		position: fixed;
		right: 10rpx;
		font-weight: normal;
		font-size: 24rpx;
		color: rgb(194,194,194);
		margin-right: 26rpx;
	}
	.shizhuan{
		color: rgb(153,153,153);
		margin-top: 8rpx;
	}
	.blue{
		border-radius: 19rpx;
		background-color: rgb(51,149,255); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
	}
	.maozi{
		color: rgb(255,255,255);
		font-size: 54rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: center;
	}
	.green{
		border-radius: 19rpx;
		background-color: rgb(72,215,171); 
		width: 90rpx;
		height: 90rpx;
		margin-bottom: 10rpx;
		margin-top: 5rpx;
		margin-left: -18rpx;
	}
	.sqjr{
		padding-left: 52rpx;
		padding-top: 36rpx;
		color: rgb(51,51,51);
		font-size: 32rpx;
	}
	.flex{
		padding-top: 15rpx;
		color: rgb(179,179,179);
		font-size: 22rpx;
		font-weight: normal;
	}
	.wu{
		border-radius: 100rpx;
		width: 38rpx;
		height: 38rpx;
		position: fixed;
		background-color: rgb(255,92,92);
		text-align: center;
		color: rgb(255,233,233);
		border: solid 4rpx rgb(255,255,255);
		margin-left: -56rpx;
		margin-top: -100rpx;
	}
	.numBox{
		border-radius: 100rpx;
		padding: 0rpx 6rpx;
		/* width: 38rpx; */
		height: 38rpx;
		position: absolute;
		background-color: rgb(255,92,92);
		text-align: center;
		color: rgb(255,233,233);
		border: solid 4rpx rgb(255,255,255);
		margin-top: -105rpx;
		margin-left: 65rpx;
	}
</style>